<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索框</title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .body{
            font-family: PingFang SC,Source Han Sans CN,Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
        }
        .searchbox  {
            left: 260px;
            top: 38px;
            width: 525px;
            height: 32px;
            border: 2px solid #e2231a;
            background: #fff;
            display: flex; /* 使用 Flexbox */
            align-items: center; /* 垂直居中 */
        }
        .searchbox .text{
            display: flex;
            padding: 2px 44px 2px 17px;
            width: 95%;
            height: 80%;
            border: 1px solid transparent;
            line-height: 26px;
            font-size: 12px;
            position: relative;
        }
        .searchbox .text input{
            width: 100%;
            height: 100%;
            border: 0;
        }
        .searchbox .icon{
            display: inline-block;
            margin-left: auto; /* 将图标推到右边 */
            position: relative;
        }
        .searchbox .icon .x1 {
            display: inline-block;
            position: absolute;
            right: 40px; /* 调整位置 */
            top: 0;
            width: 25px;
            height: 25px;
            overflow: hidden;
        }
        .searchbox .icon .X2{
            display: inline-block;
            background-color: #e1251b;
            cursor: pointer;
            height: 32px; /* 与搜索框同高 */
            width: 60px;
            position: absolute;
            right: -45px;
            top: 0;
            bottom: 0;
            margin: auto 0; /* 垂直居中 */
        }
        .searchbox .icon .X2 img{
            position: absolute;
            top:5px;
            left: 18px;
        }
    </style>
</head>
<body>
    <div class="searchbox">
        <div class="text">
            <input type="text" placeholder="紫米面包" />
            <span class="icon">
                <a href="https://www.jd.com/">
                    <span class="x1">
                        <img src="./img/拍照.png">
                    </span>
                    <span class="X2">
                        <img src="./img/搜索.jpg">
                    <span>
                </a>
            </span>
        </div>
    </div>
</body>
</html>